<template>
  <div>
    <a-spin :spinning="loading">
      <top-nav-bar :applyPageRoute="printtitle" @back="back"></top-nav-bar>
      <a-card :bordered="false" style="margin-top:15px" v-if="ordertype">
        <span class="iconfont icon-success successtitle"></span>
        <p class="success-item text" v-if="ordertype=='transfrom'">转课成功</p>
        <p class="success-item text" v-else-if="ordertype=='returncourse'">退课成功</p>
        <p class="success-item text" v-else-if="ordertype=='returnitem'">退物品成功</p>
        <p class="success-item text" v-else-if="ordertype=='returncost'">退费用成功</p>
        <p class="success-item text" v-else>报名成功</p>
        <div class="success-item">
          <a-button type="primary" class="successbtn" @click="goorder">关闭</a-button>
          <a-button type="primary" class="successbtn" @click="goapply">继续报名</a-button>
          <a-button type="defalut" class="successbtn" @click="goorderDeltil">查看订单详情</a-button>
        </div>
      </a-card>

      <a-card :bordered="false" style="margin-top:15px">
        <div style="margin-bottom: 16px;display:flex; justify-content: space-between;">
          <a-button type="primary" style="margin:0 15px;" @click="printA">打印收据</a-button>
          <div>
            <a-radio-group v-model="value" @change="onChange">
              <a-radio :value="1">A4</a-radio>
              <!-- <a-radio :value="2">小票</a-radio> -->
            </a-radio-group>
          </div>
        </div>
        <!-- 报名收据 -->
        <div class="print-dom1" v-if="value==1&&orderdata.order_type==1" ref="print1">
          <div class="print-content">
            <div class="title">{{school_name}}收据</div>
            <div class="business-other-detail">
              <div style="margin-bottom:8px;">
                <span style="font-size:16px;">订单号：</span>
                <span
                  style="height: 20px;font-size: 16px;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #333;line-height: 20px;"
                >{{orderdata.order_no}}</span>
              </div>
              <div style="display:flex;">
                <div v-if="orderdata.student">
                  <span class="other-item">学员姓名：{{orderdata.student.name}}</span>
                  <span class="other-item">手机号：{{orderdata.student.main_phone}}</span>
                </div>
                <div v-else>--</div>
                <div>
                  <span class="other-item">经办人：{{orderdata.operator||'--'}}</span>
                  <span class="other-item">经办日期：{{orderdata.purchase_at|dayjs}}</span>
                </div>
              </div>
            </div>
            <div>
              <span class="other-item" v-if="orderdata.order_type==1">订单类型：报名</span>
              <span class="other-item" v-if="orderdata.order_type==2">订单类型：退费用</span>
              <span class="other-item" v-if="orderdata.order_type==3">订单类型：退物品</span>
              <span class="other-item" v-if="orderdata.order_type==4">订单类型：退课</span>
              <span class="other-item" v-if="orderdata.order_type==5">订单类型：转课</span>
            </div>
            <div>
              <div style="padding:10px 0;font-size:16px;">课程信息</div>

              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>购买项目</td>
                  <td class="table-header-align">定价标准</td>
                  <td>购买数量</td>
                  <td>赠送数量</td>
                  <td>原价</td>
                  <td>折扣/直减</td>
                  <td>小计</td>
                </tr>

                <tr
                  v-if="orderdata.orderContent&&orderdata.orderContent.length>0"
                  v-for="(item,index) in orderdata.orderContent"
                  :key="index"
                >
                  <td>
                    <span v-if="item.project">{{item.project.name}}</span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.unit_price">
                      <span v-if="item.project_type==1">
                        <span v-if="item.price_type==1">￥{{item.unit_price}}/课时</span>
                        <span v-else-if="item.price_type==2">￥{{item.unit_price}}/天</span>
                        <span v-else>--</span>
                      </span>
                      <span v-else-if="item.project_type==2">￥{{item.unit_price}}/件</span>
                      <span v-else-if="item.project_type==3">￥{{item.unit_price}}/笔</span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.buy_number">
                      <span v-if="item.project_type==1">
                        <span v-if="item.price_type==1">{{item.buy_number}}课时</span>
                        <span v-else-if="item.price_type==2">{{item.buy_number}}天</span>
                      </span>
                      <span v-else-if="item.project_type==2">{{item.buy_number}}件</span>
                      <span v-else-if="item.project_type==3">{{item.buy_number}}笔</span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.give_number">
                      <span v-if="item.project_type==1">
                        <span v-if="item.give_number!=0">
                          <span v-if="item.price_type==1">{{item.give_number}}</span>
                          <span
                            v-else-if="item.price_type==2&&item.give_number!=0"
                          >至{{item.month_buy_end_time}}</span>
                        </span>
                        <span v-else>-</span>
                      </span>
                      <span v-if="item.project_type==2||item.project_type==3">
                        <span v-if="item.give_number!=0">{{item.give_number}}</span>
                        <span v-else>-</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.signing_price">
                      ￥
                      <span v-if="item.discount">
                        <span
                          v-if="JSON.parse(item.discount).type==1"
                        >{{Number(item.signing_price)+Number(JSON.parse(item.discount).value)}}</span>
                        <span
                          v-else-if="JSON.parse(item.discount).type==2"
                        >{{Number(item.signing_price)/(JSON.parse(item.discount).value/10)}}</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.discount">
                      <span
                        v-if="JSON.parse(item.discount).type==1"
                      >￥{{JSON.parse(item.discount).value}}</span>
                      <span
                        v-if="JSON.parse(item.discount).type==2"
                      >{{JSON.parse(item.discount).value?JSON.parse(item.discount).value+'折':'-'}}</span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.signing_price">
                      ￥
                      <span v-if="item.discount">
                        <span
                          v-if="JSON.parse(item.discount).type==1"
                        >{{Number(item.signing_price)}}</span>
                        <span
                          v-else-if="JSON.parse(item.discount).type==2"
                        >{{Number(item.signing_price)}}</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                </tr>
              </table>
              <div style="border: 1px solid #333;border-top: none;height:30px;line-height:30px;">
                <span>实交金额：</span>
                <span>{{money}} （￥{{orderdata.real_price}}）</span>
                <span
                  v-if="orderdata.real_price-orderdata.receivable<0"
                >（欠交：￥{{(orderdata.receivable*10000000-orderdata.real_price*10000000)/10000000}}）</span>
              </div>
            </div>
            <!-- 缴费记录 -->
            <div
              style="margin-top:10px"
              v-if="orderdata.orderHistory&&orderdata.orderHistory.length!==0"
            >
              <div style="padding-bottom:10px;font-size:16px;">缴费记录</div>
              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>缴费时间</td>
                  <td>收款方式</td>
                  <td>经办人</td>
                  <td>金额</td>

                  <td>状态</td>
                </tr>
                <tr
                  v-if="orderdata.orderHistory&&orderdata.orderHistory.length>0"
                  v-for="(item,index) in orderdata.orderHistory"
                  :key="index"
                >
                  <td>{{item.purchase_at|dayjs}}</td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.charge_type==1" style="margin-right:5px;">支付宝</span>
                        <span v-if="val.charge_type==2" style="margin-right:5px;">微信</span>
                        <span v-if="val.charge_type==3" style="margin-right:5px;">现金</span>
                        <span v-if="val.charge_type==4" style="margin-right:5px;">网银</span>
                        <span v-if="val.charge_type==5" style="margin-right:5px;">pos机</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                  <td>
                    <span>{{item.operator}}</span>
                  </td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">￥{{countPrice(item.prices)}}</span>
                    <span v-else>--</span>
                  </td>
                  <!-- <td>
                  <span v-if="item.remarks">
                    {{item.remarks}}
                  </span>
                  <span v-else>--</span>
                  </td>-->
                  <td>
                    <span v-if="item.status==1">收款成功</span>
                    <span v-else>--</span>
                  </td>
                </tr>
              </table>
            </div>

            <div style="font-size:16px;margin-top:15px;">
              <span>备注：</span>
              <span>{{orderdata.remarks}}</span>
            </div>
          </div>
          <div
            style="display:flex;justify-content: center;margin-top:40px; flex-direction: column;align-items: center;"
            v-if="erimg"
          >
            <img :src="erimg" alt style="width: 120px;height: 120px;" />
            <div style="font-size:14px;color:#000;">{{describe}}</div>
          </div>
        </div>
        <!-- 转课 -->
        <div class="print-dom1" v-if="value==1&&orderdata.order_type==5" ref="print1">
          <div class="print-content">
            <div class="title">{{school_name}}收据</div>
            <div class="business-other-detail">
              <div style="margin-bottom:8px;">
                <span style="font-size:16px;">订单号：</span>
                <span
                  style="height: 20px;font-size: 16px;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #333;line-height: 20px;"
                >{{orderdata.order_no}}</span>
              </div>
              <div style="display:flex;">
                <div v-if="orderdata.student">
                  <span class="other-item">学员姓名：{{orderdata.student.name}}</span>
                  <span class="other-item">手机号：{{orderdata.student.main_phone}}</span>
                </div>
                <div v-else>--</div>
                <div>
                  <span class="other-item">经办人：{{orderdata.operator||'--'}}</span>
                  <span class="other-item">经办日期：{{orderdata.purchase_at|dayjs}}</span>
                </div>
              </div>
            </div>
            <div>
              <span class="other-item" v-if="orderdata.order_type==1">订单类型：报名</span>
              <span class="other-item" v-if="orderdata.order_type==2">订单类型：退费用</span>
              <span class="other-item" v-if="orderdata.order_type==3">订单类型：退物品</span>
              <span class="other-item" v-if="orderdata.order_type==4">订单类型：退课</span>
              <span class="other-item" v-if="orderdata.order_type==5">订单类型：转课</span>
            </div>
            <div>
              <div style="padding:10px 0;font-size:16px;">课程信息</div>

              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>转出项目</td>
                  <td class="table-header-align">原订单号</td>
                  <td>单价</td>
                  <td>转出购买数量</td>
                  <td>转出赠送数量</td>
                  <td>手续费/亏损费</td>
                  <td>转出金额</td>
                </tr>

                <tr
                  v-if="orderdata.refunds&&orderdata.refunds!=''"
                  v-for="(item,index) in orderdata.refunds"
                  :key="index"
                >
                  <!-- 退出课程 -->
                  <td>
                     <span v-if="item.original_order">{{item.original_order.order_no}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.original_order">{{item.original_order.order_no}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.unit_price">
                      <span v-if="item.price_type==1">￥{{item.unit_price}}/课时</span>
                      <span v-else-if="item.price_type==2">￥{{item.unit_price}}/天</span>
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.number">
                      <span v-if="item.price_type==1">{{item.number}}课时</span>
                      <span v-else-if="item.price_type==2">{{item.number}}天</span>
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.give_number">
                      <span v-if="item.price_type==1">{{item.give_number}}课时</span>
                      <span v-else-if="item.price_type==2">{{item.give_number}}天</span>
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.other_amount">
                     {{item.other_amount}}
                      <span v-if="item.other_type==2">（亏损费）</span>
                      <span v-else-if="item.other_type==1">（手续费）</span>
                      <!-- <span v-else>-</span> -->
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.total_amount">{{item.total_amount}}</span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
              <div
                style="text-align:right;border: 1px solid #333;border-top: none;border-bottom: none;height:30px;line-height:30px;"
              >
                转出合计:￥
                <span style="margin-right:30px;">{{transferoutSum.toFixed(2)}}</span>
              </div>

              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>转入项目</td>
                  <td class="table-header-align">定价标准</td>
                  <td>购买数量</td>
                  <td>赠送数量</td>
                  <td>转出赠送数量</td>
                  <td>直减/折扣</td>
                  <td>小计</td>
                </tr>

                <tr
                  v-if="orderdata.orderContent&&orderdata.orderContent!=''"
                  v-for="(item,index) in orderdata.orderContent"
                  :key="index"
                >
                  <td>
                    <span v-if="item.project">{{item.project.name}}</span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.unit_price">
                      <span v-if="item.project_type==1">
                        <span v-if="item.price_type==1">￥{{item.unit_price}}/课时</span>
                        <span v-else-if="item.price_type==2">￥{{item.unit_price}}/天</span>
                        <span v-else>--</span>
                      </span>
                      <span v-else-if="item.project_type==2">￥{{item.unit_price}}/件</span>
                      <span v-else-if="item.project_type==3">￥{{item.unit_price}}/笔</span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.buy_number">
                      <span v-if="item.project_type==1">
                        <span v-if="item.price_type==1">{{item.buy_number}}课时</span>
                        <span v-else-if="item.price_type==2">{{item.buy_number}}天</span>
                      </span>
                      <span v-else-if="item.project_type==2">{{item.buy_number}}件</span>
                      <span v-else-if="item.project_type==3">{{item.buy_number}}笔</span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.give_number">
                      <span v-if="item.project_type==1">
                        <span v-if="item.give_number!=0">
                          <span v-if="item.price_type==1">{{item.give_number}}</span>
                          <span
                            v-else-if="item.price_type==2&&item.give_number!=0"
                          >至{{item.month_buy_end_time}}</span>
                        </span>
                        <span v-else>-</span>
                      </span>
                      <span v-if="item.project_type==2||item.project_type==3">
                        <span v-if="item.give_number!=0">{{item.give_number}}</span>
                        <span v-else>-</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.signing_price">
                      ￥
                      <span v-if="item.discount">
                        <span
                          v-if="JSON.parse(item.discount).type==1"
                        >{{Number(item.signing_price)+Number(JSON.parse(item.discount).value)}}</span>
                        <span
                          v-else-if="JSON.parse(item.discount).type==2"
                        >{{Number(item.signing_price)/(JSON.parse(item.discount).value/10)}}</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.discount">
                      <span
                        v-if="JSON.parse(item.discount).type==1"
                      >￥{{JSON.parse(item.discount).value}}</span>
                      <span
                        v-if="JSON.parse(item.discount).type==2"
                      >{{JSON.parse(item.discount).value?JSON.parse(item.discount).value+'折':'-'}}</span>
                    </span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.signing_price">
                      ￥
                      <span v-if="item.discount">
                        <span
                          v-if="JSON.parse(item.discount).type==1"
                        >{{Number(item.signing_price)}}</span>
                        <span
                          v-else-if="JSON.parse(item.discount).type==2"
                        >{{Number(item.signing_price)}}</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                </tr>
              </table>
              <div
                style="text-align:right;border: 1px solid #333;border-top: none;height:30px;line-height:30px;"
              >
                转入合计:￥
                <span style="margin-right:30px;">{{transferinSum.toFixed(2)}}</span>
              </div>
              <div
                style="border: 1px solid #333;border-top: none;height:30px;line-height:30px;text-align:right;"
              >
                <span v-if="orderdata.bill_type==1">实收金额：</span>
                <span v-if="orderdata.bill_type==2">实退金额：</span>
                <span>{{money}} （￥{{orderdata.real_price}}）</span>
                <span
                  v-if="orderdata.real_price-orderdata.receivable<0"
                >（欠交：￥{{(orderdata.receivable*10000000-orderdata.real_price*10000000)/10000000}}）</span>
              </div>
              <!-- <div style="border: 1px solid #333;border-top: none;height:30px;line-height:30px;text-align:right;" v-else>
                <span>实2金额：</span>
                <span>{{money}} （￥{{orderdata.real_price}}）</span>
                <span
                  v-if="orderdata.real_price-orderdata.receivable<0"
                >（欠交：￥{{(orderdata.receivable*10000000-orderdata.real_price*10000000)/10000000}}）</span>
              </div>-->
            </div>
            <!-- 缴费记录 -->
            <div
              style="margin-top:10px"
              v-if="orderdata.orderHistory&&orderdata.orderHistory.length!==0"
            >
              <div style="padding-bottom:10px;font-size:16px;">
                <span v-if="orderdata.bill_type==1">缴费记录</span>
                <span v-if="orderdata.bill_type==2">退款记录</span>
              </div>
              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>项目</td>
                  <td>缴费时间</td>
                  <td>收款方式</td>
                  <td>经办人</td>
                  <td>金额</td>

                  <td>状态</td>
                </tr>
                <tr
                  v-if="orderdata.orderHistory&&orderdata.orderHistory.length>0"
                  v-for="(item,index) in orderdata.orderHistory"
                  :key="index"
                >
                  <td>转课</td>
                  <td>{{item.purchase_at|dayjs}}</td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.charge_type==1" style="margin-right:5px;">支付宝</span>
                        <span v-if="val.charge_type==2" style="margin-right:5px;">微信</span>
                        <span v-if="val.charge_type==3" style="margin-right:5px;">现金</span>
                        <span v-if="val.charge_type==4" style="margin-right:5px;">网银</span>
                        <span v-if="val.charge_type==5" style="margin-right:5px;">pos机</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                  <td>
                    <span>{{item.operator}}</span>
                  </td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">￥{{countPrice(item.prices)}}</span>
                    <span v-else>--</span>
                  </td>
                  <!-- <td>
                  <span v-if="item.remarks">
                    {{item.remarks}}
                  </span>
                  <span v-else>--</span>
                  </td>-->
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.bill_type==1" style="margin-right:5px;">收款成功</span>
                        <span v-if="val.bill_type==2" style="margin-right:5px;">退款成功</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                </tr>
              </table>
            </div>

            <div style="font-size:16px;margin-top:15px;">
              <span>备注：</span>
              <span>{{orderdata.remarks}}</span>
            </div>
          </div>
          <div
            style="display:flex;justify-content: center;margin-top:40px; flex-direction: column;align-items: center;"
            v-if="erimg"
          >
            <img :src="erimg" alt style="width: 120px;height: 120px;" />
            <div style="font-size:14px;color:#000;">{{describe}}</div>
          </div>
        </div>
        <!-- 退课收据 -->
        <div class="print-dom1" v-if="value==1&&orderdata.order_type==4" ref="print1">
          <div class="print-content">
            <div class="title">{{school_name}}收据</div>
            <div class="business-other-detail">
              <div style="margin-bottom:8px;">
                <span style="font-size:16px;">订单号：</span>
                <span
                  style="height: 20px;font-size: 16px;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #333;line-height: 20px;"
                >{{orderdata.order_no}}</span>
              </div>
              <div style="display:flex;">
                <div v-if="orderdata.student">
                  <span class="other-item">学员姓名：{{orderdata.student.name}}</span>
                  <span class="other-item">手机号：{{orderdata.student.main_phone}}</span>
                </div>
                <div v-else>--</div>
                <div>
                  <span class="other-item">经办人：{{orderdata.operator||'--'}}</span>
                  <span class="other-item">经办日期：{{orderdata.purchase_at|dayjs}}</span>
                </div>
              </div>
            </div>
            <div>
              <span class="other-item" v-if="orderdata.order_type==1">订单类型：报名</span>
              <span class="other-item" v-if="orderdata.order_type==2">订单类型：退费用</span>
              <span class="other-item" v-if="orderdata.order_type==3">订单类型：退物品</span>
              <span class="other-item" v-if="orderdata.order_type==4">订单类型：退课</span>
              <span class="other-item" v-if="orderdata.order_type==5">订单类型：转课</span>
            </div>
            <div>
              <div style="padding:10px 0;font-size:16px;">课程信息</div>

              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>退出课程</td>
                  <td class="table-header-align">原订单号</td>
                  <td>单价</td>
                  <td>退出购买数量</td>
                  <td>退出赠送数量</td>
                  <td>手续费/亏损费</td>
                  <td>退出金额</td>
                </tr>

                <tr
                  v-if="orderdata.refunds&&orderdata.refunds!=''"
                  v-for="(item,index) in orderdata.refunds"
                  :key="index"
                >
                  <!-- 退出课程 -->
                  <td>
                    <span v-if="item.project">{{item.project.name}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                     <span v-if="item.original_order">{{item.original_order.order_no}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.unit_price">
                      <span v-if="item.price_type==1">￥{{item.unit_price}}/课时</span>
                      <span v-else-if="item.price_type==2">￥{{item.unit_price}}/天</span>
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.number">
                      <span v-if="item.price_type==1">{{item.number}}课时</span>
                      <span v-else-if="item.price_type==2">{{item.number}}天</span>
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.give_number">
                      <span v-if="item.price_type==1">{{item.give_number}}课时</span>
                      <span v-else-if="item.price_type==2">{{item.give_number}}天</span>
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.other_amount">
                      {{item.other_amount}}
                      <span v-if="item.other_type==2">（亏损费）</span>
                      <span v-else-if="item.other_type==1">（手续费）</span>
                      <!-- <span v-else>-</span> -->
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.total_amount">{{item.total_amount}}</span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
              <div style="border: 1px solid #333;border-top: none;height:30px;line-height:30px;">
                <span>实退金额：</span>
                <span>{{money}} （￥{{orderdata.real_price}}）</span>
                <span
                  v-if="orderdata.real_price-orderdata.receivable<0"
                >（欠交：￥{{(orderdata.receivable*10000000-orderdata.real_price*10000000)/10000000}}）</span>
              </div>
            </div>
            <!-- 缴费记录 -->
            <div
              style="margin-top:10px"
              v-if="orderdata.orderHistory&&orderdata.orderHistory.length!==0"
            >
              <div style="padding-bottom:10px;font-size:16px;">
               <span v-if="orderdata.bill_type==1">缴费记录</span>
                <span v-if="orderdata.bill_type==2">退款记录</span>
              </div>
              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>项目</td>
                  <td>缴费时间</td>
                  <td>收款方式</td>
                  <td>经办人</td>
                  <td>金额</td>

                  <td>状态</td>
                </tr>
                <tr
                  v-if="orderdata.orderHistory&&orderdata.orderHistory.length>0"
                  v-for="(item,index) in orderdata.orderHistory"
                  :key="index"
                >
                  <td>退课</td>
                  <td>{{item.purchase_at|dayjs}}</td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.charge_type==1" style="margin-right:5px;">支付宝</span>
                        <span v-if="val.charge_type==2" style="margin-right:5px;">微信</span>
                        <span v-if="val.charge_type==3" style="margin-right:5px;">现金</span>
                        <span v-if="val.charge_type==4" style="margin-right:5px;">网银</span>
                        <span v-if="val.charge_type==5" style="margin-right:5px;">pos机</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                  <td>
                    <span>{{item.operator}}</span>
                  </td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">￥{{countPrice(item.prices)}}</span>
                    <span v-else>--</span>
                  </td>
                  <!-- <td>
                  <span v-if="item.remarks">
                    {{item.remarks}}
                  </span>
                  <span v-else>--</span>
                  </td>-->
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.bill_type==1" style="margin-right:5px;">收款成功</span>
                        <span v-if="val.bill_type==2" style="margin-right:5px;">退款成功</span>
                      </span>
                    </span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
            </div>

            <div style="font-size:16px;margin-top:15px;">
              <span>备注：</span>
              <span>{{orderdata.remarks}}</span>
            </div>
          </div>
          <div
            style="display:flex;justify-content: center;margin-top:40px; flex-direction: column;align-items: center;"
            v-if="erimg"
          >
            <img :src="erimg" alt style="width: 120px;height: 120px;" />
            <div style="font-size:14px;color:#000;">{{describe}}</div>
          </div>
        </div>
        <!-- 退物品 -->
        <div class="print-dom1" v-if="value==1&&orderdata.order_type==3" ref="print1">
          <div class="print-content">
            <div class="title">{{school_name}}收据</div>
            <div class="business-other-detail">
              <div style="margin-bottom:8px;">
                <span style="font-size:16px;">订单号：</span>
                <span
                  style="height: 20px;font-size: 16px;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #333;line-height: 20px;"
                >{{orderdata.order_no}}</span>
              </div>
              <div style="display:flex;">
                <div v-if="orderdata.student">
                  <span class="other-item">学员姓名：{{orderdata.student.name}}</span>
                  <span class="other-item">手机号：{{orderdata.student.main_phone}}</span>
                </div>
                <div v-else>--</div>
                <div>
                  <span class="other-item">经办人：{{orderdata.operator||'--'}}</span>
                  <span class="other-item">经办日期：{{orderdata.purchase_at|dayjs}}</span>
                </div>
              </div>
            </div>
            <div>
              <span class="other-item" v-if="orderdata.order_type==1">订单类型：报名</span>
              <span class="other-item" v-if="orderdata.order_type==2">订单类型：退费用</span>
              <span class="other-item" v-if="orderdata.order_type==3">订单类型：退物品</span>
              <span class="other-item" v-if="orderdata.order_type==4">订单类型：退课</span>
              <span class="other-item" v-if="orderdata.order_type==5">订单类型：转课</span>
            </div>
            <div>
              <div style="padding:10px 0;font-size:16px;">课程信息</div>

              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>退出物品</td>
                  <td class="table-header-align">原订单号</td>
                  <td>单价</td>
                  <td>退出购买数量</td>

                  <td>手续费/亏损费</td>
                  <td>退出金额</td>
                </tr>

                <tr
                  v-if="orderdata.refunds&&orderdata.refunds!=''"
                  v-for="(item,index) in orderdata.refunds"
                  :key="index"
                >
                  <!-- 退出课程 -->
                  <td>
                    <span v-if="item.project">{{item.project.name}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.original_order">{{item.original_order.order_no}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.unit_price">{{item.unit_price}}元/件</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.number">{{item.number}}件</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.other_amount">
                      {{item.other_amount}}
                      <span v-if="item.other_type==2">（亏损费）</span>
                      <span v-else-if="item.other_type==1">（手续费）</span>
                      <!-- <span v-else>-</span> -->
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.total_amount">￥{{item.total_amount}}</span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
              <div style="border: 1px solid #333;border-top: none;height:30px;line-height:30px;">
                <span>实退金额：</span>
                <span>{{money}} （￥{{orderdata.real_price}}）</span>
                <span
                  v-if="orderdata.real_price-orderdata.receivable<0"
                >（欠交：￥{{(orderdata.receivable*10000000-orderdata.real_price*10000000)/10000000}}）</span>
              </div>
            </div>
            <!-- 缴费记录 -->
            <div
              style="margin-top:10px"
              v-if="orderdata.orderHistory&&orderdata.orderHistory.length!==0"
            >
              <div style="padding-bottom:10px;font-size:16px;">
               <span v-if="orderdata.bill_type==1">缴费记录</span>
                <span v-if="orderdata.bill_type==2">退款记录</span>
              </div>
              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>项目</td>
                  <td>缴费时间</td>
                  <td>收款方式</td>
                  <td>经办人</td>
                  <td>金额</td>

                  <td>状态</td>
                </tr>
                <tr
                  v-if="orderdata.orderHistory&&orderdata.orderHistory.length>0"
                  v-for="(item,index) in orderdata.orderHistory"
                  :key="index"
                >
                  <td>退物品</td>
                  <td>{{item.purchase_at|dayjs}}</td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.charge_type==1" style="margin-right:5px;">支付宝</span>
                        <span v-if="val.charge_type==2" style="margin-right:5px;">微信</span>
                        <span v-if="val.charge_type==3" style="margin-right:5px;">现金</span>
                        <span v-if="val.charge_type==4" style="margin-right:5px;">网银</span>
                        <span v-if="val.charge_type==5" style="margin-right:5px;">pos机</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                  <td>
                    <span>{{item.operator}}</span>
                  </td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">￥{{countPrice(item.prices)}}</span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.bill_type==1" style="margin-right:5px;">收款成功</span>
                        <span v-if="val.bill_type==2" style="margin-right:5px;">退款成功</span>
                      </span>
                    </span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
            </div>

            <div style="font-size:16px;margin-top:15px;">
              <span>备注：</span>
              <span>{{orderdata.remarks}}</span>
            </div>
          </div>
          <div
            style="display:flex;justify-content: center;margin-top:40px; flex-direction: column;align-items: center;"
            v-if="erimg"
          >
            <img :src="erimg" alt style="width: 120px;height: 120px;" />
            <div style="font-size:14px;color:#000;">{{describe}}</div>
          </div>
        </div>
        <!-- 退费用 -->
        <div class="print-dom1" v-if="value==1&&orderdata.order_type==2" ref="print1">
          <div class="print-content">
            <div class="title">{{school_name}}收据</div>
            <div class="business-other-detail">
              <div style="margin-bottom:8px;">
                <span style="font-size:16px;">订单号：</span>
                <span
                  style="height: 20px;font-size: 16px;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #333;line-height: 20px;"
                >{{orderdata.order_no}}</span>
              </div>
              <div style="display:flex;">
                <div v-if="orderdata.student">
                  <span class="other-item">学员姓名：{{orderdata.student.name}}</span>
                  <span class="other-item">手机号：{{orderdata.student.main_phone}}</span>
                </div>
                <div v-else>--</div>
                <div>
                  <span class="other-item">经办人：{{orderdata.operator||'--'}}</span>
                  <span class="other-item">经办日期：{{orderdata.purchase_at|dayjs}}</span>
                </div>
              </div>
            </div>
            <div>
              <span class="other-item" v-if="orderdata.order_type==1">订单类型：报名</span>
              <span class="other-item" v-if="orderdata.order_type==2">订单类型：退费用</span>
              <span class="other-item" v-if="orderdata.order_type==3">订单类型：退物品</span>
              <span class="other-item" v-if="orderdata.order_type==4">订单类型：退课</span>
              <span class="other-item" v-if="orderdata.order_type==5">订单类型：转课</span>
            </div>
            <div>
              <div style="padding:10px 0;font-size:16px;">课程信息</div>

              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>退出费用</td>
                  <td class="table-header-align">原订单号</td>
                  <td>单价</td>
                  <td>退出购买数量</td>

                  <td>手续费/亏损费</td>
                  <td>退出金额</td>
                </tr>

                <tr
                  v-if="orderdata.refunds&&orderdata.refunds!=''"
                  v-for="(item,index) in orderdata.refunds"
                  :key="index"
                >
                  <!-- 退出课程 -->
                  <td>
                    <span v-if="item.project">{{item.project.name}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.original_order">{{item.original_order.order_no}}</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.unit_price">{{item.unit_price}}元/笔</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.number">{{item.number}}笔</span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.other_amount">
                      {{item.other_amount}}
                      <span v-if="item.other_type==2">（亏损费）</span>
                      <span v-else-if="item.other_type==1">（手续费）</span>
                      
                    </span>
                    <span v-else>-</span>
                  </td>

                  <td>
                    <span v-if="item.total_amount">￥{{item.total_amount}}</span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
              <div style="border: 1px solid #333;border-top: none;height:30px;line-height:30px;">
                <span>实退金额：</span>
                <span>{{money}} （￥{{orderdata.real_price}}）</span>
                <span
                  v-if="orderdata.real_price-orderdata.receivable<0"
                >（欠交：￥{{(orderdata.receivable*10000000-orderdata.real_price*10000000)/10000000}}）</span>
              </div>
            </div>
            <!-- 缴费记录 -->
            <div
              style="margin-top:10px"
              v-if="orderdata.orderHistory&&orderdata.orderHistory.length!==0"
            >
              <div style="padding-bottom:10px;font-size:16px;">
               <span v-if="orderdata.bill_type==1">缴费记录</span>
                <span v-if="orderdata.bill_type==2">退款记录</span>
              </div>
              <table border="1" style="width:100%;color:#000">
                <tr>
                  <td>项目</td>
                  <td>缴费时间</td>
                  <td>收款方式</td>
                  <td>经办人</td>
                  <td>金额</td>

                  <td>状态</td>
                </tr>
                <tr
                  v-if="orderdata.orderHistory&&orderdata.orderHistory.length>0"
                  v-for="(item,index) in orderdata.orderHistory"
                  :key="index"
                >
                  <td>退费用</td>
                  <td>{{item.purchase_at|dayjs}}</td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.charge_type==1" style="margin-right:5px;">支付宝</span>
                        <span v-if="val.charge_type==2" style="margin-right:5px;">微信</span>
                        <span v-if="val.charge_type==3" style="margin-right:5px;">现金</span>
                        <span v-if="val.charge_type==4" style="margin-right:5px;">网银</span>
                        <span v-if="val.charge_type==5" style="margin-right:5px;">pos机</span>
                      </span>
                    </span>
                    <span v-else>--</span>
                  </td>
                  <td>
                    <span>{{item.operator}}</span>
                  </td>
                  <td>
                    <span v-if="item.prices&&item.prices.length>0">￥{{countPrice(item.prices)}}</span>
                    <span v-else>--</span>
                  </td>

                  <td>
                    <span v-if="item.prices&&item.prices.length>0">
                      <span v-for="(val,i) in item.prices" :key="i">
                        <span v-if="val.bill_type==1" style="margin-right:5px;">收款成功</span>
                        <span v-if="val.bill_type==2" style="margin-right:5px;">退款成功</span>
                      </span>
                    </span>
                    <span v-else>-</span>
                  </td>
                </tr>
              </table>
            </div>

            <div style="font-size:16px;margin-top:15px;">
              <span>备注：</span>
              <span>{{orderdata.remarks}}</span>
            </div>
          </div>
          <div
            style="display:flex;justify-content: center;margin-top:40px; flex-direction: column;align-items: center;"
            v-if="erimg"
          >
            <img :src="erimg" alt style="width: 120px;height: 120px;" />
            <div style="font-size:14px;color:#000;word-break: break-all;">{{describe}}</div>
          </div>
        </div>
        <!-- 小票打印 -->
        <div class="print-dom" v-if="value==2" ref="print2">
          <div class="v5-xiaopiao-print-content">
            <div class="receipt-print-preview">
              <div class="title">{{school_name}}</div>
              <div class="order-basic-info section dash-border fonthei">
                <div>
                  订单号:
                  {{orderdata.order_no}}
                </div>
                <div v-if="orderdata.operator">经办人: {{orderdata.operator}}</div>
                <div v-else>经办人: --</div>
                <div v-if="orderdata.purchase_at">
                  经办日期:
                  {{orderdata.purchase_at|dayjs}}
                </div>
                <div v-else>经办日期:--</div>
              </div>
              <div class="student-info section solid-border">
                <div v-if="orderdata.student">学员姓名:{{orderdata.student.name}}</div>
                <div v-else>学员姓名:--</div>
                <div v-if="orderdata.student">手机号:{{orderdata.student.main_phone}}</div>
                <div v-else>学员姓名:--</div>
              </div>
              <div>
                <div class="section">
                  <div class="purchase-item table-box dash-border">
                    <a-table
                      :columns="columns"
                      :data-source="shopList"
                      :pagination="{hideOnSinglePage:true}"
                    >
                      <span slot="classhours" slot-scope="text,record">
                        <span v-if="record.price_type==1">{{record.buy_number}}/课时</span>
                        <span
                          v-if="record.price_type==2"
                        >{{record.buy_start_time}}至{{record.buy_end_time}}</span>
                      </span>
                      <span slot="courseMoney" slot-scope="text,record">
                        <span>{{record.buy_number*record.unit_price}}</span>
                        <span v-if="record.buy_number*record.unit_price!=0">元</span>
                      </span>
                    </a-table>
                  </div>
                  <div class="out-amount dash-border">
                    <div class="flex-box">
                      <span>收款方式:</span>
                      <span v-if="orderdata.orderHistory.length>0">
                        <span v-if="orderdata.orderHistory[0].charge_type==1">支付宝</span>
                        <span v-if="orderdata.orderHistory[0].charge_type==2">微信</span>
                        <span v-if="orderdata.orderHistory[0].charge_type==3">现金</span>
                        <span v-if="orderdata.orderHistory[0].charge_type==4">网银</span>
                        <span v-if="orderdata.orderHistory[0].charge_type==5">pos机</span>
                      </span>
                      <span v-else>--</span>
                    </div>
                    <div class="flex-box">
                      <span>应收金额:</span>
                      <span>{{orderdata.receivable}}</span>
                    </div>
                    <div class="flex-box">
                      <span>实收金额:</span>
                      <span>{{orderdata.real_price}}</span>
                    </div>
                    <div class="flex-box">
                      <span>欠费金额:</span>
                      <span>{{orderdata.receivable-orderdata.real_price>0?orderdata.receivable-orderdata.real_price:'0'}}</span>
                    </div>
                  </div>
                  <div></div>
                </div>
              </div>
              <div class="pay-record dash-border">
                <div class="pay-record-title">
                  <span class="line-text">支付记录</span>
                </div>
              </div>
              <div>
                <div class="flex-box">
                  <span>{{todaty}}</span>
                  <!-- <span v-if="orderdata.orderHistory&&orderdata.orderHistory.length>0"> -->
                  <span
                    v-if="orderdata.orderHistory.length>0&&orderdata.orderHistory[0].charge_type==1"
                  >支付宝</span>
                  <span
                    v-if="orderdata.orderHistory.length>0&&orderdata.orderHistory[0].charge_type==2"
                  >微信</span>
                  <span
                    v-if="orderdata.orderHistory.length>0&&orderdata.orderHistory[0].charge_type==3"
                  >现金</span>
                  <span
                    v-if="orderdata.orderHistory.length>0&&orderdata.orderHistory[0].charge_type==4"
                  >网银</span>
                  <span
                    v-if="orderdata.orderHistory.length>0&&orderdata.orderHistory[0].charge_type==5"
                  >pos机</span>
                </div>
                <div class="flex-box">
                  <span>实付</span>
                  <span v-if="orderdata.real_price">{{orderdata.real_price}}</span>
                  <span v-else>--</span>
                </div>
                <div class="flex-box">
                  <span>备注</span>
                  <span>---</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'

import { orderdetails } from '@/api/order'
import { getInfo } from '@/api/receiptPrint'
import moment from 'moment'
import { convertCurrency } from '@/utils/filtermoney'

export default {
  name: 'receipt',
  components: {
    topNavBar,
  },
  data() {
    return {
      loading: false,
      //二维码地址
      erimg: '',
      describe: '',
      school_name: null,
      printtitle: this.$route.meta.title,
      value: 1,
      shopList: [],
      columns: [
        {
          title: '课程名',
          dataIndex: 'project.name',
        },
        {
          title: '课时',
          scopedSlots: { customRender: 'classhours' },
        },
        {
          title: '小计',
          scopedSlots: { customRender: 'courseMoney' },
        },
      ],
      orderdata: {
        orderHistory: [
          {
            charge_type: null,
          },
        ],
        orderContent: [],
        user: [],
      },
      todaty: moment().format('YYYY-MM-DD'),
      money: 0,
      ordertype: null,
      transferinSum: 0,
      transferoutSum: 0,
    }
  },
  created() {
    if (this.$route.query.type) {
      this.ordertype = this.$route.query.type
    }
    this.school_name = this.$store.state.user.school_name

    this.getprintList()
    this.getimg()
  },
  methods: {
    getprintList() {
      this.loading = true
      orderdetails(this.$route.query.id)
        .then((res) => {
          console.log(res, '------------')
          this.shopList = res.orderContent
          this.orderdata = res
          this.transferoutSum = 0
          this.transferinSum = 0
          if (res.order_type == 5) {
            res.refunds.forEach((item) => {
              this.transferoutSum = Number(this.transferoutSum) + Number(item.total_amount)
            })
            res.orderContent.forEach((item) => {
              this.transferinSum = Number(this.transferinSum) + Number(item.signing_price)
            })
          }

          if (res.real_price) {
            this.money = convertCurrency(res.real_price)
          }
        })
        .finally(() => {
          this.loading = false
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取打印数据失败')
        })
    },
    //二维码
    getimg() {
      getInfo({
        school_id: this.$store.state.user.school,
        key: 'receipt_printing',
      }).then((res) => {
        if (res.value && !(res.value instanceof Array)) {
          this.erimg = res.value.qrcode.url
          this.describe = res.value.intro
        }
      }) 
    },
    moment,
    onChange(e) {
      this.value = e.target.value
    },
    back() {
      this.$router.go(-1)
    },
    printA() {
      if (this.value == 1) {
        this.$print(this.$refs.print1)
      }
      if (this.value == 2) {
        this.$print(this.$refs.print2)
      }
    },
    countPrice(arr) {
      let num = 0
      arr.forEach((val) => {
        if (val.price) {
          num = num + Number(val.price)
        }
      })
      return num
    },
    goorder() {
      this.$router.push({
        name: 'order',
      })
    },
    goapply() {
      this.$router.push({
        name: 'apply',
      })
    },
    goorderDeltil() {
      this.$router.push({
        name: 'orderdetails',
        query: {
          id: this.$route.query.id,
        },
      })
    },
  },
}
</script>

<style lang="less">
@import '~@/components/index.less';
@import '~@/assets/iconfont/iconfont.css';
.retu {
  cursor: pointer;
}
.retu:hover {
  color: @primary-color;
}
.receipt-print-preview {
  width: 300px;
  margin: auto;
  border: 1px solid #333;
  padding: 40px 24px;
  color: #333;
  .title {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
  }
  .dash-border {
    border-bottom: 1px dashed #333;
  }
  .order-basic-info {
    padding-bottom: 12px;
    margin-bottom: 12px;
    font-size: 12px;
  }
  .fonthei {
    font-size: 14px;
  }
  .solid-border {
    border-bottom: 1px solid #333;
  }
  .student-info {
    padding-bottom: 16px;
    margin-bottom: 8px;
  }
  .table-box {
    margin-bottom: 12;
  }
  .purchase-item {
    margin-bottom: 8px;
  }
  .flex-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .out-amount {
    padding-bottom: 8px;
  }
  .pay-record {
    height: 30px;
    line-height: 30px;
    margin-bottom: 12px;
    text-align: center;
  }
}
.print-content {
  // height: 800px;
  width: 680px;
  margin: auto;
  color: #000 !important;
  // padding: 16px 24px 40px;
  // border: 1px solid #333;
  .title {
    text-align: center;
    font-size: 24px;
  }
  .business-other-detail {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    color: #000;
  }
  .sign-up-table {
    display: table;
    border-collapse: collapse;
    .row {
      // border-bottom:none !important;
      display: table-row;
      .first {
        border-right: 1px solid #333 !important;
        // border-bottom:1px solid #333 !important;
      }
      .slide-down {
        border-bottom: 1px solid #333 !important;
      }
      .sign-up-title {
        display: table-cell;
        vertical-align: middle;
        border: 1px solid #333;
        border-right: none;
        border-bottom: none;
        box-sizing: border-box;

        width: 80px;
        text-align: center;
      }
    }
  }
}
.other-item {
  margin-right: 24px;
  height: 17px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  line-height: 17px;
}
.successtitle {
  font-size: 60px !important;
  color: #5dd333;
  height: 60px;
  line-height: 60px;
  display: block;
  text-align: center;
}
.success-item {
  display: block;
  text-align: center;
}
.text {
  font-size: 20px;
  line-height: 28px;
  color: #333;
  margin: 12px 0 16px;
}
.successbtn {
  margin-right: 8px;
}
td {
  height: 30px;
}
</style>